<template>
  <div class="app-container">
    <collapsebox>
      <template slot="butgroup">
        <el-button type="primary" plain @click="quickStatistics">{{
          $t("realtime.customStatistics")
        }}</el-button>
        <!-- <el-button type="danger" plain @click="quickEvacuate">{{
          $t("realtime.rapidEvacuation")
        }}</el-button> -->
        <!-- <el-button
          style="margin: 10px 0 0"
          class="info-but"
          type="info"
          plain
          @click="visitorOR"
        >{{ $t("operating.visitorHide") }}</el-button> -->

        <el-button
          style="margin: 10px 10px 0"
          class="info-but"
          type="info"
          plain
          @click="addAnimation()"
        >张三</el-button>
        <!-- <el-button
          style="margin: 10px 10px 0"
          class="info-but"
          type="info"
          plain
          @click="si()"
        >关闭</el-button> -->
      </template>
      <template slot="contentgroup">
        <el-select
          v-model="searchValue"
          clearable
          :placeholder="$t('operating.pleaseChosen')"
          @change="clearSearchValue"
        >
          <el-option
            v-for="item in deptObjData"
            :key="item.resourceId"
            :label="item.name"
            :value="item.resourceId"
          />
        </el-select>
        <!-- <el-button
          icon="el-icon-search"
          circle
          style="background-color: #f1a11e; color: #fff; margin-left: 10px"
          @click="san()"
        /> -->

        <div class="collapse-handle">
          <el-collapse v-model="activeNames">
            <el-collapse-item :title="$t('realtime.map')" name="1">
              <el-tree
                :data="mapTreeData"
                :props="v_DefaultProps"
                @node-click="nodeClick"
              />
            </el-collapse-item>
            <el-collapse-item :title="$t('realtime.resourceList')" name="2">
              <el-collapse class="collapse2" accordion>
                <el-collapse-item :title="$t('realtime.areaList')" name="first">
                  <el-table
                    :data="tableFence"
                    @select="clickShowFence"
                    @select-all="clickShowCompleteFence"
                  >
                    <el-table-column type="selection" width="30" />
                    <el-table-column
                      prop="fenceName"
                      :label="$t('realtime.fenceName')"
                    />
                    <el-table-column :label="$t('realtime.styleModification')">
                      <template slot-scope="scope">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="$t('realtime.changeFenceStyle')"
                          placement="top"
                        >
                          <el-color-picker
                            v-model="scope.row.layerName"
                            show-alpha
                            size="mini"
                            @change="changeColor(scope.row)"
                          />
                        </el-tooltip>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="$t('realtime.modifyBorderStyle')"
                          placement="top"
                        >
                          <el-color-picker
                            v-model="scope.row.creator"
                            show-alpha
                            size="mini"
                            @change="changeColor(scope.row)"
                          />
                        </el-tooltip>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </el-collapse-item>
          </el-collapse>
        </div>
      </template>
    </collapsebox>
    <div class="map-container">
      <div id="map" />
    </div>
    <el-dialog
      title="30分钟轨迹查询"
      :visible.sync="isDialog"
      :destroy-on-close="true"
      @opened="openDialog"
    >
      <div id="map2" />
    </el-dialog>
    <div id="popup" class="ol-popup">
      <a id="popup-closer" href="#" class="ol-popup-closer" />
      <div id="popup-content" />
      <!-- <el-button
        id="trackHistory"
        type="primary"
        @click="isDialog = true"
      >30分钟轨迹查询</el-button> -->
    </div>
    <el-dialog
      :title="$t('realtime.resourceList')"
      :visible.sync="dialogVisible2"
      width="30%"
      @open="resourceStatistics"
    >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" :label="$t('areaTrackPlayback.name')" />
        <el-table-column
          prop="resourceId"
          :label="$t('areaTrackPlayback.tagId')"
        />
        <el-table-column
          prop="deptname"
          :label="$t('areaTrackPlayback.department')"
        />
      </el-table>
    </el-dialog>

    <el-dialog
      :title="$t('realtime.rapidEvacuation')"
      :visible.sync="dialogVisible3"
      width="30%"
      @open="resourceStatistics"
    >
      <el-form label-width="120px">
        <el-form-item :label="$t('realtime.emergencyEvacuation.shortMessage')">
          <el-input v-model="shortMessage" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="float: right"
            @click="shortSupport"
          >{{ $t("operating.determine") }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="positiondiv">
      <span />
    </div>
    <div class="scalediv">
      <span />
    </div>
  </div>
</template>

<script>
import { GeoJSON } from 'ol/format.js'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import i18n from '@/utils/lang/index'
import { Draw } from 'ol/interaction.js'
import { createBox } from 'ol/interaction/Draw.js'
import collapsebox from '../components/collapsebox'
import { getMapTree, getMap, getAllDeptDetail } from '@/api/location'
import {
  sendThis,
  Load_Map,
  _iMap,
  _iMap2,
  _TransPixel,
  TagStyle,
  _Style,
  updateOverPopupPosition,
  FenceStyle,
  _TransMetric2,
  _TransMetricFence,
  _dPR,
  getFenceList,
  addSingleFence,
  getFenceById,
  Load_TrackMap,
  _Popup,
  MapClick,
  MapClickShrink,
  flashDot
} from '@/utils/historyMapcyqy.js'
import Overlay from 'ol/Overlay'
import { Vector as VectorSource } from 'ol/source.js'
import { Vector as VectorLayer } from 'ol/layer.js'
import Point from 'ol/geom/Point'
import Feature from 'ol/Feature'
import {
  webSockUrl,
  webSockStatisticsUrl,
  cameraServerUrl,
  baseUrl,
  ccUrl,
  initPicPath,
  webSockMonitorUrl,
  rateHeartShow
} from '@/utils/global'
import { getHistoryInfoDetail } from '@/api/system/historyDisplayInfo.js'
import { oneKeyOut, searchResourceInLayer } from '@/api/cy.js'
import { unByKey } from 'ol/Observable'
import { getVectorContext } from 'ol/render'
import { easeIn, easeOut } from 'ol/easing'
import {
  Circle,
  Fill,
  Stroke,
  Style,
  Text,
  Icon,
  Circle as CircleStyle
} from 'ol/style.js'
export default {
  components: { Treeselect, collapsebox },
  data() {
    return {
      isNoTagIcon: false, // 控制闪烁点击时,单个弹出
      isPopup: false, // 是否打开
      isNoPopup: false, // 非搜索状态的类型
      noTagIcon: null, // 非搜索状态的类型
      searchLock: false,
      isClearWord: false,
      isCircle: false, // 是否隐藏其他点光圈
      measureTooltipList: [],
      isMeasureTool: true,
      measureTooltipElement: null,
      measureTooltip: null,
      pointSource: null,
      classList: ['red', 'blue', 'green', 'orange'],
      pointLayer: null,
      deptObjData: [],
      mapTreeData: [],
      mapId: null,
      colCardBox: false,
      options: [],
      searchValue: '',
      activeNames: ['1', '2'],
      v_DefaultProps: {
        children: 'children',
        label: 'label'
      },

      oldMapId: null,
      tableFence: [], // 围栏列表数据
      fenceId: null,
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      color: null,
      color2: null,
      systemID: null,
      ws: null,
      TagSource: null,
      shrinkSource: null,
      TagLayer: null,
      shrinkLayer: null,
      isDialog: false,
      bLockEx: true,
      featureId: null,
      rloading: [],
      feature_: null,
      trackData: [],
      posLength: null,
      trackTagSource: null,
      trackTagLayer: null,
      lineSource: null,
      lineLayer: null,
      currentPos: null,
      setTImeOut_: null,
      visitor: i18n.t('operating.visitorHide'),
      draw_: null,
      tableData: [],
      evacuateMessage: {},
      shortMessage: null,
      layerName: null,
      tagTempIcon: null, // 存储当前搜索的位置信息
      isTag: false // 是否有存储值
    }
  },
  // isForLife：1表示超时告警 2跳检告警  车辆vin就是resourceId字段 后四位是name字段
  mounted() {
    this.getAllDeptDetail()
    this.initData()
  },

  beforeDestroy() {
    this.ws.close()
    clearTimeout(this.setTImeOut_)
  },
  methods: {
    addAnimation() {
      const x = Math.random() * 100 + 100
      const y = Math.random() * 100 + 100
      var iconFeatureq = new Feature(new Point([x, y]))
      iconFeatureq.setStyle(
        new Style({
          image: new Icon({
            src: '/static/icon/5ren.png',
            color: 'yellow',
            opacity: 0.4
          }),
          text: new Text({
            text: '222',
            offsetY: 14,
            fill: new Fill({
              color: '#fff'
            }),
            stroke: new Stroke({
              color: '#000',
              width: 3
            }),
            rotation: 0
          })
          // zIndex: 999
        })
      )
      this.TagSource.addFeature(iconFeatureq)
      flashDot(iconFeatureq, this.TagLayer)
    },
    clearSearchValue(e) {
      _iMap.getOverlayById('popup_').setPosition(undefined)
      this.isPopup = true
    },
    san() {
      this.TagSource.getFeatures().map((f) => {
        // if (f.get('name') == '张三') {
        if (f.get('tag_id') == this.searchValue) {
          _iMap.getView().setCenter(f.getGeometry().getCoordinates())
          if (this.isPopup) {
            _Popup(f, f.getGeometry().getCoordinates())
          }
          f.set('visible', true)
          for (let i = 0; i < this.measureTooltipList.length; i++) {
            if (this.measureTooltipList[i].getId() == f.get('tag_id')) {
              this.measureTooltipList[i].set('visible', true)
              this.isCircle = true
              return
            }
          }
        } else {
          f.set('visible', false)
        }
      })
    },

    compareTagId() {
      const self = this
      this.isTag = false
      if (this.searchValue !== '') {
        self.TagSource.getFeatures().map((f) => {
          if (f.get('tag_id') == self.searchValue) {
            this.tagTempIcon = f
            this.isTag = true
            _iMap.getView().setCenter(f.getGeometry().getCoordinates())
            if (this.isPopup) {
              _Popup(f, f.getGeometry().getCoordinates())
            }
            f.set('visible', true)
            for (let i = 0; i < this.measureTooltipList.length; i++) {
              if (this.measureTooltipList[i].getId() == f.get('tag_id')) {
                this.measureTooltipList[i].set('visible', true)
                this.isCircle = true
                return
              }
            }
          } else {
            f.set('visible', false)
          }
        })

        if (!this.isTag) {
          this.showTagVisible()
        }
      } else {
        this.showTagVisible()
      }
    },
    showTagVisible() {
      this.isCircle = false
      this.TagSource.getFeatures().map((f) => {
        f.set('visible', true)
      })
    },

    si() {
      this.ws.close()
      console.log('销了', this.ws)
    },
    getAllDeptDetail() {
      getAllDeptDetail().then((res) => {
        const RES = this.responseUse(res)
        if (typeof RES !== 'undefined') {
          this.deptObjData = RES
        }
      })
    },
    collapseCardBox() {
      this.colCardBox = !this.colCardBox
      if (this.colCardBox) {
        $('.card').css('display', 'none')
        $('.colCardBox').css('right', '0')
        $('.colCardBox i').attr('class', 'el-icon-d-arrow-left')
      } else {
        $('.card').css('display', 'block')
        $('.colCardBox').css('right', '230px')
        $('.colCardBox i').attr('class', 'el-icon-d-arrow-right')
      }
    },
    search() {
      console.log(this.searchValue)
      searchResourceInLayer(this.searchValue).then((res) => {
        if (res.code === 200) {
          if (RES.layerId != null) {
            // 切换地图，将地图中要搜索的资源居中，并将气泡弹出
            this.mapId = res.data.layerId
            // this.searchLock = true // 搜索到人员所在的层后，打开锁，对人员进行过滤
            // this.changeMap()
          }
        }
      })
    },
    initData() {
      this.webSocketPosition()
      getMapTree().then((res) => {
        const RES = this.responseUse(res)
        if (typeof RES !== 'undefined') {
          this.mapTreeData = RES
          sendThis(this)
          this.mapId = RES[0].id
          this.layerName = RES[0].mapName
          this.getMapData()
        }
      })
    },
    clickShowFence(row) {
      addSingleFence(row)
    },
    clickShowCompleteFence(row) {
      addSingleFence(row)
    },
    getMapData() {
      this.measureTooltipList = []
      this.isMeasureTool = true
      if (this.mapId == this.oldMapId) {
        this.$message({
          message: i18n.t('realtime.areaQequired'),
          type: 'warning'
        })
      } else {
        this.oldMapId = this.mapId
        getMap(this.mapId).then((res) => {
          const RES = this.responseUse(res)
          if (RES != undefined) {
            $('#map').empty()
            Load_Map(
              baseUrl + '/file' + RES.mapPath,
              RES.mapActualX,
              RES.mapActualY,
              RES.mapPixelX,
              RES.mapPixelY,
              RES.mapPixelX / RES.mapActualX,
              [RES.mapOriginX, RES.mapOriginY],
              true
            )
            getFenceList(this.mapId)
            this.loadLayer()

            // const param = JSON.stringify({
            //   key: this.systemID,
            //   layerId: this.mapId
            // })
            // this.webSocketOnSend(param)

            if (this.mapId == '194') {
              const param = JSON.stringify({
                key: this.systemID,
                layerId: 164
              })
              this.webSocketOnSend(param)
            } else if (this.mapId == '177') {
              const param = JSON.stringify({
                key: this.systemID,
                layerId: 164
              })
              this.webSocketOnSend(param)
            } else {
              const param = JSON.stringify({
                key: this.systemID,
                layerId: this.mapId
              })
              this.webSocketOnSend(param)
            }
          }
        })
      }
    },
    nodeClick(draggingNode) {
      this.mapId = draggingNode.id
      this.layerName = draggingNode.label
      this.getMapData()
    },
    changeColor(val) {
      getFenceById(
        val.idx,
        val.layerName,
        val.creator,
        val.fenceType,
        val.fenceName
      )
    },

    // flashDot(feature, _tileLayer) {
    //   const start = Date.now()
    //   const flashGeom = feature.getGeometry().clone()
    //   // const flashGeom = _TransPixel(feature.getGeometry().getCoordinates()).clone()
    //   const listenerKey = _tileLayer.on('postrender', animate)
    //   // const listenerKey = this.tileLayer.on("postcompose", animate);
    //   // const self = this
    //   const duration = 1000
    //   function animate(event) {
    //     const frameState = event.frameState
    //     const elapsed = frameState.time - start
    //     if (elapsed >= duration) {
    //       unByKey(listenerKey)
    //       return
    //     }
    //     const vectorContext = getVectorContext(event)
    //     const elapsedRatio = elapsed / duration
    //     // radius will be 5 at start and 30 at end.
    //     const radius = easeOut(elapsedRatio) * 20 + 2
    //     const opacity = easeOut(1 - elapsedRatio)

    //     const style = new Style({
    //       image: new CircleStyle({
    //         radius: radius,
    //         stroke: new Stroke({
    //           color: 'rgba(255, 0, 0, ' + opacity + ')',
    //           // width: 0.25 + opacity,
    //           width: 2 + opacity
    //         })
    //       })
    //     })

    //     vectorContext.setStyle(style)
    //     vectorContext.drawGeometry(flashGeom)
    //     // tell OpenLayers to continue postrender animation
    //     _iMap.render()
    //   }
    // },

    // websocket
    webSocketPosition() {
      const self = this
      self.systemID = new Date().getTime().toString()
      var param = JSON.stringify({
        register: self.systemID
      })
      if ('WebSocket' in window) {
        // self.ws = new WebSocket(
        //   'ws://192.168.3.121:8080/socket/websocket/socketServer.do'
        // )
        // 'ws://192.168.3.198:8080/socket/websocket/socketServer.do'
        // this.ws = new WebSocket(`ws://${process.env.VUE_APP_BASE_API}/socket/websocket/socketServer.do`);
        self.ws = new WebSocket(
          'ws://192.168.3.214:8080/socket/websocket/socketServer.do'

        )
        self.ws.onopen = function() {
          self.webSocketOnSend(param)
          console.log('数据发送中...')
        }
        self.ws.onmessage = function(evt) {
          self.getMessage(evt.data)
        }

        // self.ws.onmessage = function(evt) {
        //   self.getMessage(evt.data)
        // }

        self.ws.onclose = function() {
          console.log('连接已关闭...')
        }
        self.ws.onerror = function(e) {
          console.log('连接出错', e)
        }
      } else {
        console.log('您的浏览器不支持WebSocket!')
      }
    },
    webSocketOnSend(data) {
      const self = this
      if (self.ws.readyState === 1) {
        self.ws.send(data)
      }
    },
    getMessage(el) {
      const self = this
      const result = $.parseJSON(el)
      if (result.message === 'handshake') {
      } else if (result.message === 'Point') {
        if (self.bLockEx) {
          self.bLockEx = false
          const format = new GeoJSON()
          const newFeatures = format.readFeatures(result.data)
          if (self.isMeasureTool) {
            // 判断是否首次初始化闪烁点
            newFeatures.forEach(function(f, index) {
              f.setId(f.get('resourceId'))
              const coords = _TransPixel(f.getGeometry().getCoordinates())

              self.initTagPos(f, coords)
              self.initTooltipEle(f, coords)
            })
            this.measureTooltipList.map((item) => {
              _iMap.addOverlay(item)
            })
            self.isMeasureTool = false
          } else {
            newFeatures.forEach(function(f) {
              f.setId(f.get('resourceId'))
              const coords1 = _TransPixel(f.getGeometry().getCoordinates())
              self.compareTagId()
              self.initTagPos(f, coords1)
              // flashDot(f, self.TagLayer)
              self.relaceTooltip(f, coords1)
            })
          }
          self.bLockEx = true
        }
      }
    },

    initTagPos(f, coords) {
      const self = this
      const tag = self.TagSource.getFeatureById(f.get('resourceId'))
      if (tag != null) {
        if (
          tag.get('pos_x') - 0.3 > f.get('pos_x') ||
          tag.get('pos_x') + 0.3 < f.get('pos_x') ||
          tag.get('pos_y') - 0.3 > f.get('pos_y') ||
          tag.get('pos_y') + 0.3 < f.get('pos_y')
        ) {
          tag.set('pos_x', f.get('pos_x'))
          tag.set('pos_y', f.get('pos_y'))
          tag.set('axis', f.get('axis'))

          tag.getGeometry().setCoordinates(coords)
          //   updateOverPopupPosition(tag, coords1)
        }
      } else {
        f.getGeometry().setCoordinates(coords)
        f.setId(f.get('resourceId'))
        f.set('visible', true)
        self.TagSource.addFeature(f)
      }
    },

    initTooltipEle(f, coords) {
      const colorName =
        f.get('isForLife') == 0
          ? 'green'
          : f.get('isForLife') == 1
            ? 'red'
            : f.get('isForLife') == 2
              ? 'blue'
              : 'orange'
      // const measureEle = document.createElement('div')
      // measureEle.className = 'point_animation'
      // measureEle.setAttribute('id', f.get('tag_id'))
      // const p = document.createElement('p')
      // var span = document.createElement('span')
      // p.className = colorName
      // span.className = colorName
      // measureEle.appendChild(p)
      // measureEle.appendChild(span)
      const measureEle = document.createElement('div')
      measureEle.className = 'css_animations'
      measureEle.classList.add(colorName)
      measureEle.setAttribute('id', f.get('tag_id'))
      const measureTooltip = new Overlay({
        id: f.get('tag_id'),
        element: measureEle,
        // offset: [-3, -4],
        // offset: [-1, -4],
        // positioning: 'bottom-center'
        positioning: 'center-center'
      })
      measureTooltip.setPosition(coords)
      this.measureTooltipList.push(measureTooltip)
    },

    relaceTooltip(f, coords) {
      f.getGeometry().setCoordinates(coords)
      if (this.isNoTagIcon && f.get('tag_id') == this.noTagIcon.get('tag_id')) {
        this.noTagIcon.getGeometry().setCoordinates(coords)
      }

      const colorName =
        f.get('isForLife') == 0
          ? 'green'
          : f.get('isForLife') == 1
            ? 'red'
            : f.get('isForLife') == 2
              ? 'blue'
              : 'orange'
      // const measureEle = document.createElement('div')
      // measureEle.className = 'point_animation'
      // const p = document.createElement('p')
      // const span = document.createElement('span')
      const measureEle = document.createElement('div')
      measureEle.className = 'css_animations'

      for (let i = 0; i < this.measureTooltipList.length; i++) {
        if (this.measureTooltipList[i].getId() == f.get('tag_id')) {
          if (this.isCircle) {
            if (f.get('tag_id') == this.searchValue) {
              // p.className = colorName
              // span.className = colorName
              measureEle.classList.add(colorName)
            }
          } else {
            // p.className = colorName
            // span.className = colorName
            measureEle.classList.add(colorName)

            if (this.isNoPopup && this.noTagIcon) {
              _Popup(
                this.noTagIcon,
                this.noTagIcon.getGeometry().getCoordinates()
              )
            }
          }

          // measureEle.appendChild(p)
          // measureEle.appendChild(span)
          $(measureEle).click(() => {
            // MapClick(f)
            MapClick(f)
            this.isNoTagIcon = true
          })

          this.measureTooltipList[i].setElement(measureEle)
          this.measureTooltipList[i].setPosition(coords)

          return
        }
      }
    },

    loadLayer() {
      if (this.TagSource != null) {
        this.TagSource.clear()
      }
      this.TagSource = new VectorSource({
        wrapX: false
      })
      this.TagLayer = new VectorLayer({
        source: this.TagSource,
        style: function(feature) {
          return TagStyle(feature, 0)
        },
        zIndex: 9999
      })
      // console.log('layer的Index', this.TagLayer.getZIndex())

      if (this.shrinkSource != null) {
        this.shrinkSource.clear()
      }
      this.shrinkSource = new VectorSource({
        wrapX: false
      })
      this.shrinkLayer = new VectorLayer({
        source: this.shrinkSource,
        style: function(feature) {
          return TagStyle(feature, 0)
        },
        zIndex: 2
      })
      _iMap.addLayer(this.TagLayer)
      _iMap.addLayer(this.shrinkLayer)
    },

    quickStatistics() {
      const self = this
      self.draw_ = new Draw({
        source: this.TagSource,
        type: 'Circle',
        geometryFunction: createBox()
      })
      _iMap.addInteraction(self.draw_)
      self.draw_.on('drawend', function(evt) {
        const coors = evt.feature.getGeometry().getCoordinates()[0]
        self.tableData = []
        self.TagSource.getFeatures().forEach((val) => {
          const coors_ = val.getGeometry().getCoordinates()
          if (
            coors_[0] <= coors[1][0] &&
            coors_[0] >= coors[0][0] &&
            coors_[1] <= coors[2][1] &&
            coors_[1] >= coors[0][1]
          ) {
            const param = {
              name: val.get('name'),
              resourceId: val.get('resourceId'),
              deptname: val.get('deptname')
            }
            self.tableData.push(param)
          }
        })
        if (self.tableData.length > 0) {
          self.dialogVisible2 = true
        } else {
          self.msgInfo(
            self.$i18n.t('realtime.notificationMessage.noResourceData')
          )
        }
      })
    },
    quickEvacuate() {
      const self = this
      self.draw_ = new Draw({
        source: this.TagSource,
        type: 'Circle',
        geometryFunction: createBox()
      })
      _iMap.addInteraction(self.draw_)
      self.draw_.on('drawend', function(evt) {
        const coors = evt.feature.getGeometry().getCoordinates()[0]
        self.evacuateMessage = {}
        self.TagSource.getFeatures().forEach((val) => {
          const coors_ = val.getGeometry().getCoordinates()
          self.evacuateMessage = {
            posGroupArray: '[' + _TransMetric2(coors, 2).toString() + ']',
            layerId: self.mapId,
            layerName: self.layerName
          }
        })
        self.dialogVisible3 = true
      })
    },
    shortSupport() {},
    resourceStatistics() {
      _iMap.removeInteraction(this.draw_)
    },
    visitorOR() {
      if (this.visitor == i18n.t('operating.visitorHide')) {
        this.TagSource.getFeatures().forEach((val) => {
          if (val.get('type') == 'staff') {
            val.set('visible', false)
          }
        })
        this.visitor = i18n.t('operating.visitorShow')
      } else {
        this.TagSource.getFeatures().forEach((val) => {
          if (val.get('type') == 'staff') {
            val.set('visible', true)
          }
        })
        this.visitor = i18n.t('operating.visitorHide')
      }
    },
    openDialog() {
      getMap(this.mapId).then((res) => {
        const RES = this.responseUse(res)
        if (RES != undefined) {
          $('#map2').empty()
          Load_TrackMap(
            baseUrl + '/file' + RES.mapPath,
            RES.mapActualX,
            RES.mapActualY,
            RES.mapPixelX,
            RES.mapPixelY,
            RES.mapPixelX / RES.mapActualX,
            [RES.mapOriginX, RES.mapOriginY]
          )
        }
        this.loadTrackLayer()
        return
        this.getTrackRoad()
      })
    },
    getTrackRoad() {
      this.rloading = this.$loading({
        lock: true,
        text: i18n.t('areaTrackPlayback.loading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)'
      })
      clearTimeout(this.setTImeOut_)
      this.currentPos = 0
      const startTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
      const endTime = new Date(new Date().getTime() - 1000 * 60 * 30).Format(
        'yyyy-MM-dd hh:mm:ss'
      )
      const param = {
        mapId: this.mapId,
        resourceId: this.featureId,
        startTime: startTime,
        endTime: endTime
      }
      getHistoryInfoDetail(param).then((res) => {
        this.rloading.close()
        const RES = this.responseUse(res)
        if (undefined != RES && RES.length > 0) {
          var point = new Point(_TransPixel([RES[0].posX, RES[0].posY]))
          this.feature_ = new Feature(point)
          this.feature_.set('type', RES[0].type)
          this.feature_.set('name', RES[0].resourceName)
          this.feature_.set('visible', true)
          this.feature_.set('workTypeName', RES[0].workTypeName)
          this.feature_.setId(RES[0].tagId)
          this.TagSource.addFeature(this.feature_)
          this.trackData = RES
          this.posLength = RES.length
          $('.playbtn i').attr('class', 'al-icon-carpause')
          this.drawLine()
        } else {
          this.$message({
            message: i18n.t('operating.switchQuery')
          })
        }
      })
    },
    drawLine() {
      var self = this
      self.progressIndex = self.currentPos
      if (self.currentPos > self.posLength || self.posLength == 0) {
        return
      }
      if (
        self.currentPos == self.posLength ||
        self.currentPos == self.posLength - 1
      ) {
        // 点位移动
        var from = _TransPixel([
          self.trackData[self.posLength - 1].posX,
          self.trackData[self.posLength - 1].posY
        ])

        self.feature_.getGeometry().setCoordinates(from)
      } else {
        var from = _TransPixel([
          self.trackData[self.currentPos].posX,
          self.trackData[self.currentPos].posY
        ])
        var to = _TransPixel([
          self.trackData[self.currentPos + 1].posX,
          self.trackData[self.currentPos + 1].posY
        ])
        // 点位移动
        self.feature_.getGeometry().setCoordinates(to)
        // 画线
        var lineFeature = new Feature(new LineString([from, to]))
        self.lineSource.addFeature(lineFeature)
      }
      self.currentPos++
      self.setTImeOut_ = setTimeout(function() {
        self.drawLine()
      }, self.temp)
    },
    loadTrackLayer() {
      if (this.trackTagSource != null) {
        this.trackTagSource.clear()
      }
      this.trackTagSource = new VectorSource({
        wrapX: false
      })
      this.trackTagLayer = new VectorLayer({
        source: this.trackTagSource,
        style: function(feature) {
          return TagStyle(feature, 0)
        }
      })
      if (this.lineSource != null) {
        this.lineSource.clear()
      }
      this.lineSource = new VectorSource({
        wrapX: false
      })
      this.lineLayer = new VectorLayer({
        source: this.lineSource,
        style: new Style({
          stroke: new Stroke({
            color: 'green',
            width: 3
          })
        })
      })
      _iMap2.addLayer(this.lineLayer)
      _iMap2.addLayer(this.trackTagLayer)
    }
  }
}
</script>

<style>
.ol-layer canvas {
  z-index: 40;
  /* border: #1890ff 4px solid; */
}
/* .ol-overlay-container.ol-selectable {
  z-index: 0;
  border: 2px solid yellowgreen;
} */
.map-container {
  width: 100%;
  height: 100%;
  /* height: calc(100% - 100px); */
}
div.map-container #map {
  height: 100%;
}
.collapse-handle {
  margin-top: 12px;
}

.container {
  width: 100%;
  height: calc(100vh - 50px);
  padding: 0;
  box-sizing: border-box;
}
#map {
  width: 100%;
  height: 100%;
  background: rgb(238, 238, 238);
}
.card {
  width: 300px;
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  background: white;
  padding: 12px;
  border-radius: 5px;
}
.handle {
  width: 100%;
  margin-top: 10px;
}
.colCardBox {
  position: absolute;
  top: 22px;
  right: 230px;
  z-index: 999;
}
.collapse2 .el-collapse-item__header {
  color: #000;
  font-size: 12px;
  font-weight: 400;
  background-image: linear-gradient(180deg, #fff, #fff) !important;
  padding-left: 20px;
}

.point_animation {
  background: #f56c6c;
  width: 0px;
  height: 0px;
  border: 0px #f56c6c solid;
  border-radius: 50%;
  position: absolute;
  /* z-index: 1; */
}

.point_animation p,
.point_animation span {
  position: absolute;
  width: 3px;
  height: 3px;
  animation: point_animation 1.5s infinite;
  /* z-index: 1; */

  margin: 0px;
  border-radius: 50%;
}
.point_animation p.red,
.point_animation span.red {
  box-shadow: 0px 0px 3px #f01515;
}
.point_animation p.green,
.point_animation span.green {
  box-shadow: 0px 0px 3px #46c905;
}
.point_animation p.blue,
.point_animation span.blue {
  box-shadow: 0px 0px 3px #0083fd;
}
.point_animation p.orange,
.point_animation span.orange {
  box-shadow: 0px 0px 3px #ed9200;
}

.point_animation span {
  animation-delay: 0.8s;
}
@keyframes point_animation {
  10% {
    transform: scale(1);
  }
  100% {
    transform: scale(8);
  }
}
.css_animation {
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background: rgba(255, 0, 0, 0.9);
  transform: scale(0);
  animation: mypoint 3s;
  animation-iteration-count: infinite;
}
@keyframes mypoint {
  to {
    transform: scale(1.5);
    background: rgba(0, 0, 0, 0);
  }
}

.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 180px;
  display: none;
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

#map2 {
  width: 100%;
  height: 500px;
}

.css_animations {
  height: 50px;
  width: 50px;
  border-radius: 25px;
  transform: scale(0);
  animation: myfirst 3s;
  animation-iteration-count: infinite;
}
.css_animations.red {
  background: #f01515;
}
.css_animations.green {
  background: #46c905;
}
.css_animations.blue {
  background: #0083fd;
}
.css_animations.orange {
  background: #ed9200;
}

@keyframes myfirst {
  to {
    transform: scale(1.4);
    background: rgba(0, 0, 0, 0);
  }
}
</style>
